<template>
  <div class="reservoir-page">
    <el-card shadow="never" class="breadcrumb-card">
      <div class="breadcrumb-content">
        <div class="breadcrumb-title">
          <div class="breadcrumb-icon-wrapper">
            <el-icon class="breadcrumb-icon">
              <Grid />
            </el-icon>
          </div>
          <div>
            <p class="breadcrumb-subtitle">仓库管理 · 库区信息</p>
            <h2 class="breadcrumb-heading">库区信息管理</h2>
          </div>
        </div>
        <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb-nav">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
          <el-breadcrumb-item>库区信息管理</el-breadcrumb-item>
          <el-breadcrumb-item>库区信息管理列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-card>

    <el-card shadow="never" class="search-card">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><Filter /></el-icon>
          <span class="header-title">筛选查询</span>
        </div>
      </template>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="关键词">
          <el-input
            v-model="searchForm.keyword"
            placeholder="请输入库区编码/名称"
            clearable
            class="search-input"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="所属仓库">
          <el-select
            v-model="searchForm.warehouseid"
            placeholder="请选择所属仓库"
            clearable
            class="search-select"
          >
            <el-option
              v-for="item in warehouselist"
              :key="item.id"
              :label="item.warehousenmae"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="search-actions">
          <el-button
            :icon="Refresh"
            @click="handleReset"
            class="action-btn reset-btn"
            >重置</el-button
          >
          <el-button
            type="primary"
            :icon="Search"
            :loading="loading"
            @click="handleSearch"
            class="action-btn search-btn"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" class="table-card">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <el-icon class="header-icon"><List /></el-icon>
            <span class="header-title">库区信息列表</span>
            <el-tag type="info" class="count-tag">{{ info.totalCount }}</el-tag>
          </div>
          <div class="header-actions">
            <el-button
              type="success"
              :icon="Plus"
              @click="flowAdd"
              class="action-btn add-btn"
              >新增库区</el-button
            >
            <el-button
              type="danger"
              :icon="Delete"
              :disabled="multipleSelection.length === 0"
              @click="handleBatchDelete"
              class="action-btn delete-btn"
              >批量删除</el-button
            >
          </div>
        </div>
      </template>
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        class="data-table"
        @selection-change="handleSelectionChange"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          fontWeight: '600',
        }"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="id" label="编号" width="180" align="center" />
        <el-table-column prop="reservoircode" label="库区编码" min-width="180">
          <template #default="scope">
            <el-tag type="primary" effect="plain" class="code-tag">
              {{ scope.row.reservoircode }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="reservoirnmae"
          label="库区名称"
          min-width="150"
        />
        <el-table-column prop="area" label="面积" width="120" align="right">
          <template #default="scope">
            <span v-if="scope.row.area">{{ scope.row.area }} m²</span>
            <span v-else class="empty-text">-</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="warehousenmae"
          label="所属仓库"
          min-width="150"
        />
        <el-table-column
          prop="remark"
          label="备注"
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template #default="scope">
            <el-button
              type="primary"
              :icon="Edit"
              size="small"
              link
              @click="flowUpdate(scope.row)"
              class="table-action-btn edit-btn"
              >编辑</el-button
            >
            <el-button
              type="danger"
              :icon="Delete"
              size="small"
              link
              @click="open(scope.row.id)"
              class="table-action-btn delete-btn"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <div class="pagination-wrapper">
          <el-button
            size="small"
            :icon="DArrowLeft"
            @click="gotoFirst"
            :disabled="info.Pageindex === 1"
            class="pagination-btn"
            >首页</el-button
          >
          <el-button
            size="small"
            :icon="ArrowLeft"
            @click="gotoPrev"
            :disabled="info.Pageindex === 1"
            class="pagination-btn"
            >上一页</el-button
          >
          <el-pagination
            v-model:current-page="info.Pageindex"
            v-model:page-size="info.PageSize"
            :page-sizes="[3, 5, 7, 10]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="info.totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            class="pagination-component"
          />
          <el-button
            size="small"
            :icon="ArrowRight"
            @click="gotoNext"
            :disabled="info.Pageindex >= totalPages"
            class="pagination-btn"
            >下一页</el-button
          >
          <el-button
            size="small"
            :icon="DArrowRight"
            @click="gotoLast"
            :disabled="info.Pageindex >= totalPages"
            class="pagination-btn"
            >尾页</el-button
          >
        </div>
      </div>
    </el-card>
  </div>

  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="950"
    class="reservoir-dialog"
    :close-on-click-modal="false"
    :show-close="true"
    destroy-on-close
  >
    <template #header>
      <div class="dialog-header">
        <div class="dialog-header-background"></div>
        <div class="dialog-header-decoration">
          <div class="decoration-circle circle-1"></div>
          <div class="decoration-circle circle-2"></div>
          <div class="decoration-circle circle-3"></div>
        </div>
        <div class="dialog-header-content">
          <div class="dialog-header-left">
            <div class="dialog-header-icon-wrapper">
              <el-icon class="dialog-header-icon"><Tickets /></el-icon>
              <div class="icon-glow"></div>
            </div>
            <div class="dialog-header-text">
              <h3 class="dialog-header-title">
                <span class="title-icon">📋</span>
                {{ title }}
              </h3>
              <p class="dialog-header-subtitle">
                <el-icon class="subtitle-icon"><InfoFilled /></el-icon>
                请填写库区相关信息，带
                <span class="required-mark">*</span> 的为必填项
              </p>
            </div>
          </div>
          <div class="dialog-header-right">
            <div
              class="header-badge"
              :class="title === '库区信息新增' ? 'badge-add' : 'badge-edit'"
            >
              <el-icon class="badge-icon">
                <Check v-if="title === '库区信息新增'" />
                <Edit v-else />
              </el-icon>
              <span>{{
                title === "库区信息新增" ? "新增模式" : "编辑模式"
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <div class="reservoir-form">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="130px"
        class="reservoir-form-content"
      >
        <div class="reservoir-section">
          <div class="reservoir-section__header">
            <div class="reservoir-section__title">
              <div class="section-icon-wrapper">
                <el-icon class="section-icon"><Tickets /></el-icon>
              </div>
              <span class="section-title-text">基础信息</span>
            </div>
            <div class="section-divider"></div>
          </div>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="库区编码" prop="reservoircode" required>
                <div class="code-input-wrapper">
                  <el-input
                    v-model="ruleForm.reservoircode"
                    :disabled="ruleForm.autoCode"
                    placeholder="请输入库区编码"
                    class="code-input-field"
                    size="large"
                  >
                    <template #prefix>
                      <el-icon class="input-icon"><Key /></el-icon>
                    </template>
                  </el-input>
                  <div class="code-switch-wrapper">
                    <div class="code-switch-content">
                      <el-switch
                        v-model="ruleForm.autoCode"
                        inline-prompt
                        active-text="系统编号"
                        inactive-text="手动输入"
                        @change="handleAutoCodeChange"
                        class="code-switch"
                        active-color="#13ce66"
                      />
                      <span class="code-switch-label">
                        <el-icon class="switch-icon"><MagicStick /></el-icon>
                        开启后自动生成编码
                      </span>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="库区名称" prop="reservoirnmae" required>
                <el-input
                  v-model="ruleForm.reservoirnmae"
                  placeholder="请输入库区名称"
                  clearable
                  size="large"
                >
                  <template #prefix>
                    <el-icon class="input-icon"><EditPen /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="reservoir-section">
          <div class="reservoir-section__header">
            <div class="reservoir-section__title">
              <div class="section-icon-wrapper">
                <el-icon class="section-icon"><ScaleToOriginal /></el-icon>
              </div>
              <span class="section-title-text">容量 & 归属</span>
            </div>
            <div class="section-divider"></div>
          </div>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="面积" prop="area">
                <el-input
                  v-model="ruleForm.area"
                  type="number"
                  placeholder="请输入面积（m²）"
                  clearable
                  size="large"
                >
                  <template #prefix>
                    <el-icon class="input-icon"><ScaleToOriginal /></el-icon>
                  </template>
                  <template #append>
                    <span class="append-text">m²</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属仓库" prop="warehouseid" required>
                <div class="select-with-icon">
                  <el-icon class="select-icon"><House /></el-icon>
                  <el-select
                    v-model="ruleForm.warehouseid"
                    placeholder="请选择所属仓库"
                    style="width: 100%"
                    clearable
                    size="large"
                  >
                    <el-option
                      v-for="item in warehouselist"
                      :key="item.id"
                      :label="item.warehousenmae"
                      :value="item.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="reservoir-section">
          <div class="reservoir-section__header">
            <div class="reservoir-section__title">
              <div class="section-icon-wrapper">
                <el-icon class="section-icon"><InfoFilled /></el-icon>
              </div>
              <span class="section-title-text">备注信息</span>
            </div>
            <div class="section-divider"></div>
          </div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="ruleForm.remark"
                  type="textarea"
                  :rows="5"
                  placeholder="请输入备注信息（选填）"
                  maxlength="500"
                  show-word-limit
                  class="textarea-field"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          @click="dialogFormVisible = false"
          class="footer-btn cancel-btn"
          size="large"
          >取消</el-button
        >
        <el-button
          type="primary"
          :icon="Check"
          @click="submitForm(ruleFormRef)"
          class="footer-btn confirm-btn"
          size="large"
          >确定保存</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {
  ArrowRight,
  ArrowLeft,
  DArrowLeft,
  DArrowRight,
  Grid,
  InfoFilled,
  Search,
  ScaleToOriginal,
  Tickets,
  Filter,
  List,
  Plus,
  Delete,
  Edit,
  Refresh,
  Check,
  Key,
  EditPen,
  House,
  MagicStick,
} from "@element-plus/icons-vue";
import https from "@/Http/http";
import axios from "axios";
import { onMounted, reactive, ref, computed } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { ElMessageBox } from "element-plus";
import router from "@/router";
onMounted(() => {
  ReservoirShow();
  warehouseshow();
});
const tableData = ref([]);
const loading = ref(false);
const info = reactive({
  Pageindex: 1,
  PageSize: 10,
  totalCount: 0,
  pageCount: 0,
});

const searchForm = reactive({
  keyword: "",
  warehouseid: "",
});

const ReservoirShow = () => {
  loading.value = true;
  const params: any = {
    Pageindex: info.Pageindex,
    PageSize: info.PageSize,
    Reservoircode: searchForm.keyword || undefined,
    Reservoirnmae: searchForm.keyword || undefined,
    Warehouseid: searchForm.warehouseid || undefined,
  };
  https.Reads.get("/Warehouse/ReservoirList", { params })
    .then((res) => {
      console.log(res.data);
      tableData.value = res.data.data;
      info.totalCount = res.data.totalCount;
      info.pageCount = res.data.pageCount;
    })
    .catch((error) => {
      ElMessage.error("获取库区列表失败，请稍后重试");
      tableData.value = [];
      info.totalCount = 0;
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleSearch = () => {
  info.Pageindex = 1;
  ReservoirShow();
};

const handleReset = () => {
  searchForm.keyword = "";
  searchForm.warehouseid = "";
  handleSearch();
};
const handleSizeChange = (val: number) => {
  info.PageSize = val;
  info.Pageindex = 1;
  ReservoirShow();
};
const handleCurrentChange = (val: number) => {
  info.Pageindex = val;
  ReservoirShow();
};

const totalPages = computed(() =>
  Math.max(1, Math.ceil(info.totalCount / info.PageSize))
);

const gotoFirst = () => {
  if (info.Pageindex !== 1) {
    info.Pageindex = 1;
    ReservoirShow();
  }
};

const gotoPrev = () => {
  if (info.Pageindex > 1) {
    info.Pageindex -= 1;
    ReservoirShow();
  }
};

const gotoNext = () => {
  if (info.Pageindex < totalPages.value) {
    info.Pageindex += 1;
    ReservoirShow();
  }
};

const gotoLast = () => {
  if (info.Pageindex !== totalPages.value) {
    info.Pageindex = totalPages.value;
    ReservoirShow();
  }
};

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  id: 0,
  reservoircode: "",
  reservoirnmae: "",
  area: null,
  warehouseid: null,
  remark: "",
  autoCode: false,
});
const dialogFormVisible = ref(false);
const title = ref();

// 基于时分秒生成编码的辅助函数
// 使用时间戳和计数器确保每次生成都不同
let reservoirCodeGenerationCounter = 0; // 全局计数器，确保每次生成都不同

const generateReservoirCodeByTime = (): void => {
  // 立即获取当前时间，确保每次调用都获取最新时间
  const now = new Date();
  const pad = (n: number, len: number = 2) => `${n}`.padStart(len, "0");

  // 获取时分秒和完整毫秒
  const hours = pad(now.getHours());
  const minutes = pad(now.getMinutes());
  const seconds = pad(now.getSeconds());
  const milliseconds = now.getMilliseconds();

  // 获取当前时间戳（毫秒级）
  const timestamp = Date.now();

  // 获取高精度时间（如果可用）
  let microSeconds = 0;
  if (typeof performance !== "undefined" && performance.now) {
    // performance.now() 返回自页面加载以来的毫秒数，包含小数部分（微秒级精度）
    const perfNow = performance.now();
    // 将微秒部分转换为整数（0-999）
    microSeconds = Math.floor((perfNow % 1) * 1000);
  } else {
    // 如果没有 performance API，使用随机数
    microSeconds = Math.floor(Math.random() * 1000);
  }

  // 递增计数器，确保即使在同一毫秒内也能生成不同的编码
  reservoirCodeGenerationCounter =
    (reservoirCodeGenerationCounter + 1) % 100000;

  // 生成唯一因子：使用时间戳的后4位 + 微秒的3位 + 计数器的后3位
  // 这样可以确保每次生成都不同
  const timestampSuffix = timestamp.toString().slice(-4).padStart(4, "0");
  const microSecondsStr = microSeconds.toString().padStart(3, "0");
  const counterStr = reservoirCodeGenerationCounter.toString().padStart(5, "0");
  const counterSuffix = counterStr.slice(-3);

  // 组合唯一因子：时间戳后4位 + 微秒3位 + 计数器后3位 = 10位，取后6位
  const uniqueFactor = (
    timestampSuffix +
    microSecondsStr +
    counterSuffix
  ).slice(-6);

  // 生成格式：KQ + 年月日 + 时分秒 + 完整毫秒(3位) + 唯一因子(6位)
  // 格式示例：KQ202411131430521234567890（年月日时分秒毫秒唯一因子）
  const year = now.getFullYear();
  const month = pad(now.getMonth() + 1);
  const day = pad(now.getDate());
  const msStr = pad(milliseconds, 3); // 完整3位毫秒

  // 组合：KQ + 年月日(8位) + 时分秒(6位) + 毫秒(3位) + 唯一因子(6位) = 24位
  ruleForm.reservoircode =
    "KQ" +
    year +
    month +
    day +
    hours +
    minutes +
    seconds +
    msStr +
    uniqueFactor;
};

// 系统编号开关变化
const handleAutoCodeChange = async (v: boolean): Promise<void> => {
  if (v) {
    ruleForm.reservoircode = "";
    generateReservoirCodeByTime();
  } else {
    ruleForm.reservoircode = "";
  }
};

//打开弹框
const flowAdd = () => {
  title.value = "库区信息新增";
  dialogFormVisible.value = true;
  ruleForm.id = 0;
  ruleForm.reservoircode = "";
  ruleForm.reservoirnmae = "";
  ruleForm.area = null;
  ruleForm.warehouseid = null;
  ruleForm.remark = "";
  ruleForm.autoCode = true; // 默认开启自动生成
  // 打开对话框后自动生成编码（基于当前时分秒）
  setTimeout(() => {
    if (ruleForm.autoCode) {
      generateReservoirCodeByTime();
    }
  }, 150);
};
const flowUpdate = (row: any) => {
  title.value = "库区信息编辑";
  Object.assign(ruleForm, row);
  ruleForm.autoCode = false; // 编辑时默认关闭自动生成
  dialogFormVisible.value = true;
};

const rules = reactive<FormRules>({
  reservoircode: [
    { required: true, message: "库区编码不可为空", trigger: "blur" },
  ],
  reservoirnmae: [
    { required: true, message: "库区名称不可为空", trigger: "blur" },
  ],
  area: [{ required: true, message: "面积不可为空", trigger: "blur" }],
  warehouseid: [
    { required: true, message: "所属仓库不可为空", trigger: "blur" },
  ],
  remark: [{ required: true, message: "备注不可为空", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (ruleForm.id == 0) {
        https.Writes.post("/Warehouse/ReservoirAdd", ruleForm).then((res) => {
          if (res.data.code == 1) {
            ElMessage.success(res.data.msg);
            dialogFormVisible.value = false;
            ReservoirShow();
            return;
          } else {
            ElMessage.error(res.data.msg);
            return;
          }
        });
      } else {
        https.Writes.put("/Warehouse/ReservoirUpdate", ruleForm).then((res) => {
          if (res.data.code == 1) {
            ElMessage.success(res.data.msg);
            dialogFormVisible.value = false;
            ReservoirShow();
            return;
          } else {
            ElMessage.error(res.data.msg);
            return;
          }
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const open = (id: any) => {
  ElMessageBox.confirm("请问确认要删除吗?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      https.Writes.put("/Warehouse/ReservoirDelete", { id: id }).then((res) => {
        if (res.data.code == 1) {
          ElMessage.success(res.data.msg);
          ReservoirShow();
          return;
        } else {
          ElMessage.error(res.data.msg);
          return;
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};

//所属仓库下拉框
const warehouselist = ref([
  {
    id: "",
    warehousenmae: "",
  },
]);
const warehouseshow = () => {
  https.Reads.get("/Warehouse/WarehouseList").then((res) => {
    console.log(res.data);
    warehouselist.value = res.data.data;
  });
};
const multipleSelection = ref(<any[]>[]);
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val;
};
const handleBatchDelete = () => {
  // 步骤1：检查是否有选中的数据
  if (!multipleSelection.value.length) {
    ElMessage.warning("请选择需要删除的库区信息！");
    return;
  }
  const ids = multipleSelection.value.map((x) => x.id);
  // 步骤3：弹框确认是否删除
  ElMessageBox.confirm("确认要批量删除选中的库区信息吗？", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 步骤4：点击“确认”后，发起删除请求
      https.Writes.delete("/Warehouse/ReservoirDeletes", {
        data: { ids }, // 把要删除的ID列表传给后端
      }).then((res) => {
        // 步骤5：处理后端返回的结果
        if (res.data.code == 1) {
          ElMessage.success(res.data.msg); // 删除成功提示
          ReservoirShow(); // 重新加载列表（刷新页面数据）
        } else {
          ElMessage.error(res.data.msg); // 删除失败提示
        }
      });
    })
    .catch(() => {
      // 步骤6：点击“取消”后，提示“操作已取消”
      ElMessage({
        type: "info",
        message: "操作已取消",
      });
    });
};
</script>

<style scoped>
.reservoir-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #f5f7fa;
  min-height: calc(100vh - 60px);
}

/* 面包屑卡片 */
.breadcrumb-card {
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
  transition: all 0.3s ease;
}

.breadcrumb-card:hover {
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);
  transform: translateY(-2px);
}

.breadcrumb-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.breadcrumb-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.breadcrumb-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.breadcrumb-icon {
  font-size: 28px;
  color: #ffffff;
}

.breadcrumb-subtitle {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}

.breadcrumb-heading {
  margin: 4px 0 0 0;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.breadcrumb-nav {
  :deep(.el-breadcrumb__inner) {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
  }
  :deep(.el-breadcrumb__inner.is-link) {
    color: rgba(255, 255, 255, 0.8);
  }
  :deep(.el-breadcrumb__separator) {
    color: rgba(255, 255, 255, 0.6);
  }
}

/* 搜索卡片 */
.search-card {
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.search-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #303133;
}

.header-icon {
  font-size: 18px;
  color: #409eff;
}

.header-title {
  font-size: 16px;
  color: #303133;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.count-tag {
  margin-left: 8px;
  font-weight: 500;
}

.header-actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
}

.search-form :deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
  padding-bottom: 8px;
}

.search-input,
.search-select {
  width: 240px;
}

.search-actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.action-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.reset-btn {
  border-color: #dcdfe6;
  color: #606266;
}

.reset-btn:hover {
  border-color: #c0c4cc;
  background-color: #f5f7fa;
}

.search-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.add-btn {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  border: none;
  color: #fff;
}

.delete-btn {
  background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
  border: none;
  color: #fff;
}

/* 表格卡片 */
.table-card {
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.table-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.data-table {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.data-table :deep(.el-table__header) {
  background: #f5f7fa;
}

.data-table :deep(.el-table__row) {
  transition: all 0.2s ease;
}

.data-table :deep(.el-table__row:hover) {
  background-color: #f0f9ff;
  transform: scale(1.01);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.code-tag {
  font-weight: 500;
  font-family: "Courier New", monospace;
  padding: 4px 12px;
  border-radius: 6px;
}

.empty-text {
  color: #c0c4cc;
  font-style: italic;
}

.table-action-btn {
  padding: 4px 8px;
  margin: 0 4px;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-weight: 500;
}

.table-action-btn:hover {
  transform: translateY(-1px);
}

.edit-btn:hover {
  background-color: #ecf5ff;
  color: #409eff;
}

.delete-btn:hover {
  background-color: #fef0f0;
  color: #f56c6c;
}

/* 分页 */
.table-pagination {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pagination-btn {
  border-radius: 6px;
  transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pagination-component {
  margin: 0 8px;
}

/* 对话框 */
.reservoir-dialog :deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  animation: dialogFadeIn 0.3s ease-out;
}

@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.reservoir-dialog :deep(.el-dialog__header) {
  padding: 0;
  background: transparent;
  border-bottom: none;
  position: relative;
  overflow: visible;
  min-height: 140px;
}

.reservoir-dialog :deep(.el-dialog__headerbtn) {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.reservoir-dialog :deep(.el-dialog__headerbtn):hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.reservoir-dialog :deep(.el-dialog__close) {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.dialog-header {
  position: relative;
  z-index: 1;
  padding: 32px 36px;
  min-height: 140px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.dialog-header-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
  z-index: 0;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.dialog-header-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse"><path d="M 30 0 L 0 0 0 30" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="1.5"/></pattern></defs><rect width="60" height="60" fill="url(%23grid)"/></svg>');
  opacity: 0.6;
}

.dialog-header-background::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%
  );
  border-radius: 50%;
  animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

.dialog-header-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  animation: float 6s ease-in-out infinite;
}

.circle-1 {
  width: 120px;
  height: 120px;
  top: -40px;
  left: -40px;
  animation-delay: 0s;
}

.circle-2 {
  width: 80px;
  height: 80px;
  top: 20px;
  right: 100px;
  animation-delay: 2s;
}

.circle-3 {
  width: 60px;
  height: 60px;
  bottom: -20px;
  right: 50px;
  animation-delay: 4s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  33% {
    transform: translateY(-20px) translateX(10px);
  }
  66% {
    transform: translateY(10px) translateX(-10px);
  }
}

.dialog-header-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 24px;
}

.dialog-header-left {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
}

.dialog-header-icon-wrapper {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(15px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.3) inset;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.dialog-header-icon-wrapper:hover {
  transform: scale(1.08) rotate(5deg);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3),
    0 0 0 3px rgba(255, 255, 255, 0.4) inset;
}

.icon-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.4) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.dialog-header-icon-wrapper:hover .icon-glow {
  opacity: 1;
}

.dialog-header-icon {
  font-size: 36px;
  color: #ffffff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  position: relative;
  z-index: 1;
}

.dialog-header-text {
  flex: 1;
  min-width: 0;
}

.dialog-header-title {
  margin: 0 0 10px 0;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}

.title-icon {
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.dialog-header-subtitle {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  line-height: 1.5;
}

.subtitle-icon {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

.required-mark {
  color: #ffd700;
  font-weight: 700;
  margin: 0 2px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
  font-size: 16px;
}

.dialog-header-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
}

.header-badge:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.badge-icon {
  font-size: 16px;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
}

.header-badge.badge-add .badge-icon {
  color: #52c41a;
  filter: drop-shadow(0 0 4px rgba(82, 196, 26, 0.6));
}

.header-badge.badge-edit .badge-icon {
  color: #1890ff;
  filter: drop-shadow(0 0 4px rgba(24, 144, 255, 0.6));
}

.header-badge.badge-add:hover {
  background: rgba(82, 196, 26, 0.2);
  border-color: rgba(82, 196, 26, 0.4);
}

.header-badge.badge-edit:hover {
  background: rgba(24, 144, 255, 0.2);
  border-color: rgba(24, 144, 255, 0.4);
}

.reservoir-dialog :deep(.el-dialog__body) {
  padding: 32px;
  background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
  min-height: 400px;
}

.reservoir-form {
  background: transparent;
}

.reservoir-form-content {
  position: relative;
}

.reservoir-section {
  margin-bottom: 28px;
  padding: 28px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.reservoir-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.reservoir-section:hover {
  border-color: #c0c4cc;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12);
  transform: translateY(-2px);
}

.reservoir-section:hover::before {
  transform: scaleY(1);
}

.reservoir-section__header {
  margin-bottom: 24px;
}

.reservoir-section__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.section-icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.section-icon {
  font-size: 20px;
  color: #ffffff;
}

.section-title-text {
  font-size: 17px;
  font-weight: 600;
  color: #303133;
  letter-spacing: 0.3px;
}

.section-divider {
  height: 1px;
  background: linear-gradient(to right, #667eea 0%, transparent 100%);
  opacity: 0.3;
}

.code-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.code-input-field {
  width: 100%;
}

.code-switch-wrapper {
  margin-top: 8px;
}

.code-switch-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 10px;
  border: 1px solid #bae6fd;
  transition: all 0.3s ease;
}

.code-switch-content:hover {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.code-switch {
  flex-shrink: 0;
}

.code-switch-label {
  font-size: 13px;
  color: #0369a1;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.switch-icon {
  font-size: 14px;
  color: #0ea5e9;
}

.input-icon {
  font-size: 16px;
  color: #909399;
  transition: color 0.3s ease;
}

.reservoir-form-content :deep(.el-input__wrapper:hover .input-icon) {
  color: #667eea;
}

.reservoir-form-content :deep(.el-form-item__label) {
  font-weight: 600;
  color: #606266;
  font-size: 14px;
}

.reservoir-form-content :deep(.el-form-item) {
  margin-bottom: 24px;
}

.reservoir-form-content :deep(.el-input__wrapper) {
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.reservoir-form-content :deep(.el-input__wrapper:hover) {
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
  border-color: #c0c4cc;
}

.reservoir-form-content :deep(.el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
  border-color: #667eea;
}

.reservoir-form-content :deep(.el-select) {
  width: 100%;
}

.reservoir-form-content :deep(.el-select .el-input__wrapper) {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.reservoir-form-content :deep(.el-select:hover .el-input__wrapper) {
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.select-with-icon {
  position: relative;
  width: 100%;
}

.select-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #909399;
  z-index: 10;
  pointer-events: none;
  transition: color 0.3s ease;
}

.select-with-icon:hover .select-icon {
  color: #667eea;
}

.select-with-icon :deep(.el-select) {
  width: 100%;
}

.select-with-icon :deep(.el-input__wrapper) {
  padding-left: 40px;
}

.append-text {
  font-weight: 500;
  color: #606266;
  padding: 0 8px;
}

.reservoir-form-content :deep(.el-textarea__inner) {
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  font-family: inherit;
  line-height: 1.6;
}

.reservoir-form-content :deep(.el-textarea__inner:hover) {
  border-color: #c0c4cc;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.reservoir-form-content :deep(.el-textarea.is-focus .el-textarea__inner) {
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
  border-color: #667eea;
}

.textarea-field {
  width: 100%;
}

.reservoir-dialog :deep(.el-dialog__footer) {
  padding: 20px 32px;
  background: linear-gradient(to top, #f8f9fa 0%, #ffffff 100%);
  border-top: 1px solid #e4e7ed;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.footer-btn {
  padding: 12px 32px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 120px;
}

.footer-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.footer-btn:active {
  transform: translateY(0);
}

.cancel-btn {
  border-color: #dcdfe6;
  color: #606266;
  background: #ffffff;
}

.cancel-btn:hover {
  border-color: #c0c4cc;
  background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
  color: #303133;
}

.confirm-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.confirm-btn:hover {
  background: linear-gradient(135deg, #5568d3 0%, #6a3d8f 100%);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .reservoir-page {
    padding: 12px;
  }

  .breadcrumb-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-form {
    flex-direction: column;
  }

  .search-input,
  .search-select {
    width: 100%;
  }

  .search-actions {
    margin-left: 0;
    width: 100%;
  }

  .header-actions {
    flex-direction: column;
    width: 100%;
    margin-top: 12px;
  }

  .pagination-wrapper {
    flex-direction: column;
  }
}
</style>
